<template>
  <view>
    <!-- 头部图片开始 -->
    <view class="title-image" @click.stop="conceal">
      <image src="../../static/imag/banner.png" mode="widthFix"></image>
      <view class="inpt">
        <!-- 选择框 -->
        <view class="head" @click.stop="selectClick">
          <text>头像</text>
          <!-- 三角形 -->
          <view class="sjx"></view>
        </view>
        <!-- 输入框 -->
        <view class="searchBox">
          <text class="iconfont icon-search"></text>
          <input type="text" placeholder="搜索热词" v-model="antistop" />
        </view>
        <!-- 搜索 -->
        <view class="btn" @click="searchClick">
          搜索
        </view>
      </view>
      <!-- 类型 -->
      <view class="select" v-show="selectShow">
        <text v-for="(item,i) in selectList" :key="i">{{item.text}}</text>
        <view class="xingZhuang"></view>
      </view>
    </view>
    <!-- 头部图片结束 -->

    <!-- 大家都在搜开始 -->
    <view class="search">
      <view class="search-title">
        <view class="search-title-icons">
          <text class="iconfont icon-search" style="font-size: 30rpx;"></text>
          <text style="font-weight: 700;">大家都在搜</text>
        </view>
        <text style="color: #000;" @click="change">换一换</text>
      </view>
      <view class="search-bottom">
        <view class="search-view" v-for="(item,index) in search" :key="index" @click="moreClick(item)">
          <view>
            <text>#</text><text style="font-size: 26rpx;">{{item.name}}</text><text>#</text>
          </view>
          <image v-if="item.id==0" src="../../static/imag/sc.png"></image>
        </view>
      </view>
    </view>
    <!-- 大家都在搜结束 -->

    <!-- 分类栏开始 -->
    <view class="classify">
      <!-- 分类图标 -->
      <view class="classify-icons">
        <!-- 外卖红包 -->
        <navigator open-type="switchTab" class="icons-image">
          <image src="../../static/imag/wh.png"></image>
          <text>网红表情</text>
        </navigator>
        <!--抖音表情  -->
        <navigator url="../verbalTrick/verbalTrick" class="icons-image">
          <image src="../../static/imag/la.png"></image>
          <text>恋爱话术</text>
        </navigator>
        <!--早起打卡  -->
        <navigator url="../welfare/welfare" class="icons-image">
          <image src="../../static/imag/xj.png"></image>
          <text>现金红包</text>
        </navigator>
        <!-- 热门头像 -->
        <navigator class="icons-image">
          <image src="../../static/imag/tx.png"></image>
          <text>热门头像</text>
        </navigator>
        <!-- 热门头像 -->
        <navigator url="../../subpkg/task/task" class="icons-image">
          <image src="../../static/imag/rwzx.png"></image>
          <text>任务中心</text>
        </navigator>
      </view>
      <!-- 分类图片 -->
      <view class="classify-image">
        <!-- 使用说明快速上手 -->
        <navigator url="../../subpkg/instructions/instructions" class="classification">
          <image src="../../static/imag/111.png"></image>
        </navigator>
        <!-- 情侣头像个性头像 -->
        <navigator class="classification" style="margin: 0 20rpx;">
          <image src="../../static/imag/qltx.png"></image>
        </navigator>
        <!-- 恋爱话术 -->
        <navigator url="../verbalTrick/verbalTrick" open-type="switchTab" class="classification">
          <image src="../../static/imag/lahs.png"></image>
        </navigator>
      </view>
    </view>
    <!-- 分类栏结束 -->

    <!-- 热门表情包开始 -->
    <view class="hot padding">
      <view class="hot-top">
        <view class="hot-left">
          <image src="../../static/imag/sc.png" mode=""></image>
          <text>热门表情包</text>
        </view>
        <navigator url="../../subpkg/moreExpression/moreExpression" class="hot-right">
          <text>查看更多</text>
          <uni-icons type="arrowright" size="14"></uni-icons>
        </navigator>
      </view>
      <!-- 热门表情包图片 -->
      <view class="hot-bottom">
        <view class="hot-image" v-for="(item,i) in expressionList" :key="i" @click="skip()">
          <image :src="item"></image>
          <text>{{item.text}}</text>
        </view>
      </view>
    </view>
    <!-- 热门表情包结束 -->

    <!-- 热门头像开始 -->
    <view class="hot padding">
      <view class="hot-top">
        <view class="hot-left">
          <image src="../../static/imag/sc.png" mode=""></image>
          <text>热门头像</text>
        </view>
        <navigator url="../../subpkg/moreExpression/moreExpression" class="hot-right">
          <text>查看更多</text>
          <uni-icons type="arrowright" size="14"></uni-icons>
        </navigator>
      </view>
      <view class="hot-bottom">
        <view class="hot-image" v-for="(item,i) in imageList" :key="i" @click="skip()">
          <image :src="item.url"></image>
          <text>{{item.text}}</text>
        </view>
      </view>
    </view>
    <!-- 热门头像结束 -->

    <!-- 聊天套路开始 -->
    <view class="hot padding">
      <!-- 头部查看更多 -->
      <view class="hot-top">
        <view class="hot-left">
          <image src="../../static/imag/sc.png" mode=""></image>
          <text>聊天套路</text>
        </view>
        <navigator url="../../subpkg/chatRoutine/chatRoutine" class="hot-right">
          <text>查看更多</text>
          <uni-icons type="arrowright" size="14"></uni-icons>
        </navigator>
      </view>
      <!-- 图片和信息 -->
      <view class="routine height">
        <view class="routine-image" style="border-bottom: 1rpx solid #eee;" v-for="(item,i) in taolu" :key="i" @click="taoLu()">
          <view class="routine-left">
            <image :src="item.src"></image>
          </view>
          <view class="routine-right">
            <text>{{item.name}}</text>
            <text style="font-size: 26rpx;color: #F5F5F5;">{{item.text}}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 聊天套路结束 -->

    <!-- 最近更新开始 -->
    <view class="hot padding">
      <!-- 头部查看更多 -->
      <view class="hot-top">
        <view class="hot-left">
          <image src="../../static/imag/sc.png" mode=""></image>
          <text>最近更新</text>
        </view>
        <navigator url="../../subpkg/moreExpression/moreExpression" class="hot-right">
          <text>查看更多</text>
          <uni-icons type="arrowright" size="14"></uni-icons>
        </navigator>
      </view>
      <!-- 动态图片 -->
      <myPicture @isId="skipClick" :Picture="recentUpdatesList"></myPicture>
    </view>
    <!-- 点击回到顶部 -->
    <backTop :scrollTop="backTop.scrollTop"></backTop>
    <TabBar tabIndex=0></TabBar>
  </view>
  <!-- 最近更新结束 -->
</template>

<script>
  import myPicture from '../../components/my-picture/my-picture.vue'
  import backTop from '../../components/back-top/back-top.vue'
  import TabBar from '../../components/jinjie-tabbar/jinjie-tabbar.vue'

  export default {
    components: {
      backTop,
      myPicture,
      TabBar
    },
    data() {
      return {
        recentUpdatesList: [], //最近更新数据
        cdnurl: '', //拼接的地址
        pageindex: 1, //默认分页第一页
        total: 0, // 总数量，用来实现分页
        isloading: false, // 是否正在请求数据
        backTop: {
          scrollTop: 0 //回到顶部按钮距离
        },
        expressionList: [], //热门头像数据


        antistop: '', //搜索的关键字
        selectShow: false, //图片类型选择默认隐藏
        selectList: [{
          text: '表情',
          id: 0
        }, {
          text: '头像',
          id: 1
        }, {
          text: '壁纸',
          id: 2
        }],
        search: [{
          id: 0,
          name: "抖音"
        }, {
          id: 1,
          name: "套路"
        }, {
          id: 2,
          name: "沙雕"
        }, {
          id: 3,
          name: "可爱"
        }, {
          id: 4,
          name: "黄夏温"
        }, {
          id: 5,
          name: "我喜欢你"
        }],
        imageList: [{
          id: 6,
          text: '我和你',
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605085692276&di=998165d53517e86045546bf270e0562c&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F1804661980%2F0.jpg'
        }, {
          id: 0,
          text: '我和你',
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605085692276&di=998165d53517e86045546bf270e0562c&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F1804661980%2F0.jpg'
        }, {
          id: 0,
          text: '我和你',
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605085692276&di=998165d53517e86045546bf270e0562c&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F1804661980%2F0.jpg'
        }, {
          id: 0,
          text: '我和你',
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605085692276&di=998165d53517e86045546bf270e0562c&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F1804661980%2F0.jpg'
        }, {
          id: 0,
          text: '我和你',
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605085692276&di=998165d53517e86045546bf270e0562c&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F1804661980%2F0.jpg'
        }, {
          id: 0,
          text: '我和你',
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605085692276&di=998165d53517e86045546bf270e0562c&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F1804661980%2F0.jpg'
        }, {
          id: 0,
          text: '我和你',
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605085692276&di=998165d53517e86045546bf270e0562c&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F1804661980%2F0.jpg'
        }, {
          id: 0,
          text: '我和你',
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605085692276&di=998165d53517e86045546bf270e0562c&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F1804661980%2F0.jpg'
        }],
        taolu: [{
            src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2053490438,3046921128&fm=26&gp=0.jpg',
            name: '祝我闺蜜资产过亿',
            text: '祝我闺蜜资产过亿,单手开法拉利有情有义'
          },
          {
            src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2053490438,3046921128&fm=26&gp=0.jpg',
            name: '祝我闺蜜资产过亿',
            text: '祝我闺蜜资产过亿,单手开法拉利有情有义'
          }, {
            src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2053490438,3046921128&fm=26&gp=0.jpg',
            name: '祝我闺蜜资产过亿',
            text: '祝我闺蜜资产过亿,单手开法拉利有情有义'
          }
        ]
      }
    },
    // 下刷加载监听
    onPageScroll(e) {
      this.backTop.scrollTop = e.scrollTop;
    },
    // 下拉到底页码索引加1
    onReachBottom() {
      // 判断是否还有下一页数据
      if (this.pageindex * 20 >= this.total) return this.$api.msg('数据加载完毕!')
      // 判断是否正在请求其它数据，如果是，则不发起额外的请求
      if (this.isloading) return
      this.pageindex += 1
      this.recentUpdates() //获取最近更新数据
    },
    onLoad() {
      this.recentUpdates() //获取最近更新数据
      this.ImagePath() //获取图片路径
      this.expression()
    },
    methods: {
      // 获取热门表情包
      async expression() {
        const {
          data: res
        } = await uni.$http.get(`/api/emjio/getemjio/stype/2/pageindex/${this.pageindex}`)
        // 请求失败
        if (res.code !== 1) return this.$api.msg()
        this.cdnurl = JSON.parse(this.$api.get('cdnurl'))
        let obj = {}
        res.data.data.forEach(item => {
          if (item.isurl == 0) {
            obj = this.cdnurl + '/' + item.imgname
            this.expressionList.push(obj)
            this.expressionList = this.expressionList.slice(0, 8);
          }
        })
      },
      // 获取最近更新数据
      async recentUpdates() {
        // ** 打开节流阀
        this.isloading = true
        const {
          data: res
        } = await uni.$http.get(`/api/emjio/getemjio/stype/1/pageindex/${this.pageindex}`)
        // ** 关闭节流阀
        this.isloading = false
        // 请求失败
        if (res.code !== 1) return this.$api.msg()
        this.total = res.data.total
        this.cdnurl = JSON.parse(this.$api.get('cdnurl'))
        res.data.data.forEach(item => {
          if (item.isurl == 0) {
            var obj = new Object()
            obj.imgname = this.cdnurl + '/' + item.imgname
            var arr = item.imgname.substring(item.imgname.length - 3, item.imgname.length)
            if (arr == 'gif') {
              obj.pic = "gif"
            }
            this.recentUpdatesList.push(obj)
          }
        })
      },
      // 获取最近更新数据
      async ImagePath() {
        const {
          data: res
        } = await uni.$http.get('/api/syscfg/config')
        // 请求失败
        if (res.code !== 1) return this.$api.msg()
        // 将图片前缀路径存起来
        this.$api.set('cdnurl', JSON.stringify(res.data.cdnurl))
        this.cdnurl = res.data.cdnurl
      },


      // 点击头部图片隐藏类型
      conceal() {
        this.selectShow = false
      },
      // 输入框搜索按钮
      searchClick() {
        this.$api.msg("搜索词不能为空~")
      },
      // 点击跳转表情包
      skip(e) {
        uni.navigateTo({
          url: `../../subpkg/meme/meme`
        })
      },
      // 点击聊天套路框跳转
      taoLu() {
        uni.navigateTo({
          url: '../../subpkg/pantomimia/pantomimia'
        })
      },
      // 点击关键字进入表情包页面
      moreClick(item) {
        // 把值传到下个页面
        uni.navigateTo({
          url: `../../subpkg/moreExpression/moreExpression?item=${JSON.stringify(item)}`
        })
      },
      // 点击头像
      selectClick() {
        this.selectShow = true
      },
      // 换一换
      change() {
        console.log(111)
      },
      skipClick(e) {
        // var url = JSON.stringify(e.index)
        // console.log(url)
        uni.navigateTo({
          url: `../../subpkg/meme/meme?url=${e.index}`
        })
      }
    }
  }
</script>

<style lang="scss">
  // 全屏默认灰色
  page {
    background-color: #F5F5F5;
  }

  // 公共间距
  .padding {
    padding: 0 30rpx;
  }

  // 头部图片开始
  .title-image {
    width: 100%;
    position: relative;

    .inpt {
      width: 690rpx;
      height: 70rpx;
      position: absolute;
      bottom: 5%;
      left: 50%;
      transform: translateX(-50%);
      display: flex;


      // 选择框
      .head {
        width: 200rpx;
        border-top-left-radius: 20rpx;
        border-bottom-left-radius: 20rpx;
        text-align: center;
        line-height: 70rpx;
        border-top-left-radius: 40rpx;
        border-bottom-left-radius: 40rpx;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20rpx;

        text {
          display: inline-block;
          margin-left: 15rpx;
        }


        .sjx {
          margin-top: 6rpx;
          width: 0;
          height: 0;
          border: 8rpx solid;
          border-color: #d2d2d2 transparent transparent transparent;

        }
      }

      // 输入框
      .searchBox {
        width: 100%;
        height: 100%;
        background-color: #fff;
        display: flex;
        align-items: center;

        text {
          font-size: 20rpx;
          margin: 0 10rpx;
        }

        input {
          width: 100%;
          height: 100%;
        }
      }

      // 搜索
      .btn {
        width: 180rpx;
        background-color: #00b26a;
        border-top-right-radius: 40rpx;
        border-bottom-right-radius: 40rpx;
        text-align: center;
        line-height: 70rpx;
        color: #fff;
      }
    }
  }

  // 头部图片结束

  // 大家都在搜开始
  .search {
    background-color: #fff;
    height: 200rpx;
    font-size: 26rpx;
    padding: 30rpx;
    display: flex;
    flex-direction: column;

    .search-title {
      display: flex;
      justify-content: space-between;

      .search-title-icons {
        display: flex;

        text:nth-child(1) {
          color: red;
          margin-right: 20rpx;
        }
      }
    }

    .search-bottom {
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;

      .search-view {
        font-size: 22rpx;
        margin-top: 25rpx;
        width: 33.33%;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          width: 34rpx;
          height: 34rpx;
        }
      }
    }
  }

  // 大家都在搜结束

  // 分类开始
  .classify {
    margin-top: 20rpx;
    height: 315rpx;
    background-color: #fff;
    padding: 30rpx 20rpx;

    // 分类图标
    .classify-icons {
      display: flex;
      justify-content: space-between;

      .icons-image {
        width: 25%;
        display: flex;
        align-items: center;
        flex-direction: column;

        image {
          width: 88rpx;
          height: 88rpx;
          margin-bottom: 15rpx;
        }

        text {
          font-size: 28rpx;
        }
      }
    }

    // 分类图片 
    .classify-image {
      margin-top: 40rpx;
      display: flex;
      justify-content: space-between;

      .classification {
        width: 33.33%;
        height: 80rpx;
      }
    }
  }

  // 分类结束

  // 热门表情包开始
  .hot {
    margin-top: 20rpx;
    background-color: #fff;
    font-size: 30rpx;

    .hot-top {
      height: 100rpx;
      border-bottom: 1rpx solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .hot-left {
        image {
          margin-right: 20rpx;
          width: 40rpx;
          height: 40rpx;
        }
      }

      .hot-right {
        color: #666;
      }
    }

    .hot-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 20rpx 0;

      .hot-image {
        width: 160rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin-top: 10rpx;

        image {
          width: 100%;
          height: 160rpx;
          border-radius: 16rpx;
        }

        text {
          font-size: 26rpx;
          display: inline-block;
          margin-top: 10rpx;
        }
      }
    }

    // 聊天套路内容高度


    // 聊天讨论图片
    .routine {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .routine-image {
        height: 230rpx;
        display: flex;
        padding: 30rpx 0;


        .routine-left {
          width: 170rpx;
          height: 170rpx;

          image {
            border-radius: 16rpx;
          }
        }

        .routine-right {
          display: flex;
          padding: 40rpx 0;
          justify-content: space-between;
          font-size: 26rpx;
          display: flex;
          flex-direction: column;
          margin-left: 20rpx;
        }
      }
    }
  }

  // 热门表情包结束

  .property {
    display: flex;
    background-color: #fff;
  }

  // 搜索类型选择
  .select {
    position: absolute;
    bottom: -37%;
    left: 6%;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 1, 0.2);

    text {
      width: 120rpx;
      height: 60rpx;
      display: block;
      background-color: #fff;
      border-bottom: 1px solid #f6f6f6;
      text-align: center;
      line-height: 60rpx;
    }

    text:nth-child(1) {
      border-top-left-radius: 16rpx;
      border-top-right-radius: 16rpx;
    }

    .xingZhuang {
      position: absolute;
      top: -37rpx;
      left: 40%;
      width: 0;
      height: 0;
      border: 20rpx solid;
      border-color: transparent transparent #fff transparent;
    }
  }
</style>
